<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<div class="layui-form-item">
    <form class="layui-form" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">游戏：</label>
                <div class="layui-input-inline">
                    <select id="gameId">
                        <option value="">请选择</option>
                        <c:forEach items="${requestScope.games}" var="g">
                            <option value="${g.id}">${g.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" class="layui-input">
                </div>
                <label class="layui-form-label" style="width: auto">注册时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="start" lay-verify="date" id="start" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="end" lay-verify="date" id="end" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-inline">
                    <select id="status">
                        <option value="">请选择</option>
                        <option value="1">有效</option>
                        <option value="0">封号</option>
                    </select>
                </div>
            </div>
            <button class="layui-btn" id="search-table-btn" type="button" >搜索</button>
        </div>

    </form>
</div>
<table id="role-table" lay-filter="role-table"></table>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn" type="button" lay-event="add"><i class="layui-icon">&#xe654;</i>  添加</button>
    <button class="layui-btn  layui-btn-danger" type="button" lay-event="delete"><i class="layui-icon">&#xe640;</i>  删除</button>
</script>
<script>
    layui.use(['table','form' ,'laydate','layer'], function() {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        //日期
        laydate.render({
            elem: '#start'
        });
        laydate.render({
            elem: '#end'
        });
        form.render();//当表单中元素是后追加进来的时候，或者radio和sel
        var tableIns= table.render({
            id:"role-table",
            elem: '#role-table'
            //,height: 312
            ,url: 'search.html' //数据接口
            ,page: true //开启分页
            ,limit:2
            ,limits: [2, 4, 6]
            //,page:{layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']} //自定义分页布局
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {field: 'ck', title: '', width:80, type:'checkbox'}
                ,{field: 'id', title: 'ID', width:80, sort: true}
                ,{field: 'name', title: '角色名', width:80}
                ,{field: 'status', title: '状态', width:80 ,templet: function(d){
                    return d.status==1?'<span class="layui-badge layui-bg-orange">有效</span>':'<span class="layui-badge layui-bg-blue">封号</span>'
                }}
                ,{field: 'registDate', title: '注册时间', width:180}
                ,{field: 'level', title: '等级', width:180}
                ,{field: 'game', title: '游戏', width:180,templet: function(d){
                    return d.game.name
                }}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
            ]]
        });
        $("#search-table-btn").click(function(){
            tableIns.reload( {
                where: {
                    name:$("#name").val(),
                    start:$("#start").val(),
                    end:$("#end").val(),
                    'game.id': $("#gameId").val(),
                    status:$("#status").val()
                } //设定异步数据接口的额外参数
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })
        table.on('tool(role-table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'edit'){ //编辑
                $.ajax({
                    url:"go_update.html",
                    data:"id="+data.id,
                    method:"post",
                    success:function(json){
                        layer.open({
                            type: 1,
                            area: ['400px', '300px'],
                            content: $("#table-edit-layer").html() //这里content是一个普通的String
                            ,btn: ['提交', '取消']
                            ,success: function(layero, index){
                                form.val("table-edit-form", {
                                    id:json.id,
                                    name:json.name,
                                    'game.id':json.game.id,
                                    status:json.status+"",
                                    level:json.level+"",
                                    registDate:json.registDate
                                })
                            }
                            ,yes: function(index, layero){
                                $.ajax({
                                    url:"update.html",
                                    method:"post",
                                    data:$("#table-edit-form").serialize(),
                                    success:function (result) {
                                        if(result.status){
                                            tableIns.reload()
                                            layer.close(index)
                                        }else{
                                            layer.msg(result.message);
                                        }
                                    }
                                })
                            }
                            ,btn2: function(index, layero){
                                layer.close(index)
                            }
                        });
                    }
                })

            }
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="table-edit-layer">
    <form id="table-edit-form" style="width: 80%" class="layui-form" lay-filter="table-edit-form">
        <input type="hidden" name="id">
        <label class="layui-form-label">游戏：</label>
        <div class="layui-input-inline">
            <select name="game.id">
                <option value="">请选择</option>
                <c:forEach items="${requestScope.games}" var="g">
                    <option value="${g.id}">${g.name}</option>
                </c:forEach>
            </select>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">等级</label>
            <div class="layui-input-block">
                <input type="text" name="level" required lay-verify="required"  autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">注册日期</label>
            <div class="layui-input-block">
                <input type="text" name="registDate" readonly autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="有效">
                <input type="radio" name="status" value="0" title="封号">
            </div>
        </div>
    </form>
</script>